<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

  body {
    text-align: center;
  }

  .box {
    width: 300px;
    height: 300px;
    /*background-color: black;*/
    margin: 20px;
    border-radius: 100%;
    display: inline-block;
    box-shadow: 0 0 0 10px #ffe3d7;
  }

  .box1 {
    background: linear-gradient(#ffe3d7, #ffe3d7) padding-box center center,
    repeating-linear-gradient(#524e4c 0, #524e4c 4px, #ffe3d7 0, #ffe3d7 8px) center center no-repeat,
    repeating-linear-gradient(
      90deg,
      #524e4c 0,
      #524e4c 4px,
      #ffe3d7 0,
      #ffe3d7 6px
    ) center center no-repeat;
    background-size: 100%, 101% 71.43%, 71.43% 101%;
    border: 1px solid transparent;
  }

  .box2 {
    position: relative;
    overflow: hidden;
  }
  .box2,
  .box2:before
  {
    background: repeating-linear-gradient(90deg, #524e4c 0, #524e4c 4px, #ffe3d7 0, #ffe3d7 6px) center center no-repeat;
    background-size: 50% 102%;
  }

  .box2:before,.box2:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  .box2:before {
    transform: rotateZ(60deg);
  }

  .box2:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    box-sizing: border-box;
    border-radius: 100%;
    border: 1px solid transparent;
    background: linear-gradient(#ffe3d7, #ffe3d7) padding-box center center,
    repeating-linear-gradient(90deg, #524e4c 0, #524e4c 4px, #ffe3d7 0, #ffe3d7 6px) center center no-repeat;
    transform: rotateZ(120deg);
    background-size: 100%, 50% 102%;
  }
  </style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>
